<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="author" content="jerehedu"/>
    <meta name="keywords" content="bootstrap,css"/>
    <meta name="description" content="jerehedu"/>
    <title>what！</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <!--<script src="js/jquery-3.1.0.min.js"></script>-->
    <script src="js/bootstrap.min.js"></script>
    <!--<script src="bootstrap.min.js"></script>-->
    <script>
        $(function(){
            $('a[href*=#],area[href*=#]').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var $target = $(this.hash);
                    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                    if ($target.length) {
                        var targetOffset = $target.offset().top;
                        $('html,body').animate({
                                    scrollTop: targetOffset
                                },
                                1000);
                        return true;
                    }
                }
            });
        })
    </script>
</head>
<body data-spy="scroll">
<header id="header-banner">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdown-box-1">
                    <span class="sr-only">Nav</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">
                    <a href="#">我的主页</a>
                </div>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="dropdown-box-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#home">主页</a></li>
                    <li class=""><a href="#aboutus">关于</a></li>
                    <li class="dropdown" role="presentation">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            展示 <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu bullet" role="menu">
                            <li><a href="#first">第一个</a></li>
                            <li><a href="#second">第二个</a></li>
                            <li><a href="#third">第三个</a></li>
                        </ul>
                    </li>
                    <li><a href="#test">栗子</a></li>
                    <li><a href="#contactus">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<section class="banner" id="home">
    <div class="container">
        <div class="slogan">
            <h2>我的主页</h2>
            <h4>We welcome your visit.</h4>
        </div>

        <div class="btn-circle-scroll">
            <a href="#section-footer" class="btn-circle">
                <span>&bigvee;</span>
            </a>
        </div>

    </div>
</section>

<section class="aboutus" id="aboutus">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div>
                    <h2>关于我们</h2>
                </div>
                <div class="col-sm-7">
                    <p>
                        这是第一张图片。
                    </p>
                    <p>
                        没有啥好说的，真的没有啥好说的。
                    </p>
                </div>
                <div class="col-sm-5">
                    <div class="img-aboutus">
                        <div>
                            <img src="img/aboutus.jpg" alt="" class="img-responsive img-rounded" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="services" id="services">
    <div class="container">

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div >
                    <h2>你看到了啥</h2>
                </div>
            </div>
        </div>

        <div class="row-padded" id="first"></div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-sm-7">
                    <h4>第一张</h4>
                    <p>
                        这里风景不错
                    </p>
                    <p>
                        可以来看看，真的可以看看<a href="#">更多...</a>
                    </p>
                </div>

                <div class="col-sm-5">
                    <div class="avatar">
                        <div>
                            <img src="img/1.jpg" alt="" class="img-responsive img-rounded" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-padded" id="second"></div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-sm-7">
                    <h4>第二张</h4>
                    <p>
                        这里风景不错
                    </p>
                    <p>
                        可以来看看，真的可以看看<a href="#">更多...</a>
                    </p>
                </div>

                <div class="col-sm-5">
                    <div class="avatar">
                        <div>
                            <img src="img/2.jpg" alt="" class="img-responsive img-rounded" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-padded" id="third"></div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-sm-7">
                    <h4>第三张</h4>
                    <p>
                        这里风景不错
                    </p>
                    <p>
                        可以来看看，真的可以看看 <a href="#">更多...</a>
                    </p>
                </div>

                <div class="col-sm-5">
                    <div class="avatar">
                        <div>
                            <img src="img/3.jpg" alt="" class="img-responsive img-rounded" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="testimonials-banner" id="test"></section>

<section class="testimonials">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="col-sm-9">
                    <blockquote>
                        <p>
                            人生自古谁无死
                        </p>
                        <footer class="blockquote-footer">
                            <strong>ff</strong>
                        </footer>
                    </blockquote>
                </div>
                <div class="col-sm-3">
                    <div class="avatar">
                        <img src="img/testimonials/tt.jpg" class="img-responsive img-rounded" />
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="col-sm-9">
                    <blockquote>
                        <p>
                            横眉冷对千夫指
                        </p>
                        <footer class="blockquote-footer">
                            <strong>ff</strong>
                        </footer>
                    </blockquote>
                </div>
                <div class="col-sm-3">
                    <div class="avatar">
                        <img src="img/testimonials/tt.jpg" class="img-responsive img-rounded" />
                    </div>
                </div>
            </div>
        </div>


    </div>
</section>

<section class="contactus" id="contactus">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div>
                    <h2>联系方法</h2>
                </div>
                <div class="col-sm-8">
                    <form class="my-form" role="form">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" name="message" id="message" rows="7" cols="25" style="resize:none;" required="required" placeholder="Message"></textarea>
                        </div>

                        <button type="submit" class="btn btn-default btn-block">发送</button>
                    </form>
                </div>

                <div class="col-sm-4">
                    <div class="physical-address">
                        <h4>我们的信息</h4>

                        <address>
                            <strong>我的地址</strong><br>
                            银河系，地球<br>
                            中国某个旮旯<br>
                            <abbr title="Phone">电话: </abbr> 0123-1234567<br>
                            <abbr title="Phone">手机: </abbr> 18866666666
                        </address>

                        <address>
                            <strong>Email</strong><br>
                            <a href="#">123456789@qq.com</a>
                        </address>
                        <address>
                            <strong>分享</strong><br>
                            <div>
                                <ul class="company-social">
                                    <li><a href="#">qq</a></li>
                                    <li><a href="#">qq</a></li>
                                </ul>
                            </div>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer id="section-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <div>
                    <div class="btn-circle-scroll">
                        <a href="#header-banner" class="btn-circle">
                            <span>&bigwedge;</span>
                        </a>
                    </div>
                </div>
                <p>Copyright &copy; This document was written in 2016</p>
            </div>
        </div>
    </div>
</footer>


</body>
</html>